<template>
	<div>
		<div v-if="pageData && pageData.items.length > 0">
			<div class="topButton">
				<el-upload class="upload-demo" action="" :http-request="uploadFiles" :show-file-list="false">
					<el-button type="primary" :loading="uploadLoading" plain>上传附件</el-button>
				</el-upload>
			</div>
			<ul class="dataUl">
				<li class="dataLi flex" style="justify-content: space-between;" v-for="item in pageData.items" :key="item.id">
					<div><span>{{ item.fileNames }}</span></div>
					<div class="flex">
						<a :href="item.url" target="_blank" :download="item.fileNames">
							<img class="downloadFileImg" src="@/assets/image/specialist/xiazkejian.png" alt="">
							点击下载
						</a>
					</div>
				</li>
			</ul>
			<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		</div>
		<noData v-else></noData>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pageData: '',
				queryData: {
					trainingId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				uploadLoading: false
			}
		},
		mounted() {
			this.getPageData()
		},
		methods:{
			paginaClick(val){
				this.queryData.page = val
				this.getPageData()
			},
			getPageData(){
				this.queryData.trainingId = this.$route.params.id
				this.$request.postForm(this.$api.getCourseWare, this.queryData).then(res=>{
					if(res.code == 200){
						// console.log(res)
						this.pageData = res.data
						this.pageData.items.forEach((v)=>{
							v.fileNames = v.url.split('/')[v.url.split('/').length - 1]
						})
							console.log(this.pageData.items)
					}
				})
			},
			uploadFiles(file) {
				// 上传课件文件
				this.uploadLoading = true
				let formData = new FormData
				formData.append('file', file.file)
				formData.append('identifier', 'FILEPATH')
				this.$request.uploading(this.$api.uploadFilefileidentifier, formData).then(res => {
					if (res.code == 200) {
						this.$request.postForm(this.$api.uploadWare,{
							url: res.data,
							trainingId: this.$route.params.id
						}).then(data=>{
							if(data.code == 200){
								this.$message.success('上传成功')
								this.getPageData()
								this.uploadLoading = false
							}
						})
					} else {
						this.$message.success('失败成功,请重新上传')
						this.uploadLoading = false
					}
				}).catch(e => {
					this.$message.success('失败成功,请重新上传')
					this.uploadLoading = false
				})
			},
		}
	}
</script>

<style scoped="scoped">
	.topButton {
		padding: 10px 0;
		text-align: right;
	}
	.dataUl{
		width: 100%;
		border-top: 1px solid #EEEEEE;
	}
	.dataLi{
		line-height: 40px;
		width: 100%;
		border-bottom: 1px solid #EEEEEE;
		padding: 0 20px;
	}
	.downloadFileImg{
		width: 14px;
		height: 14px;
		float: left;
		margin-right: 10px;
		margin-top: 13px;
	}
</style>
